<template>
  <a-row :gutter="16">
    <a-col :span="8">
      <deptTreeSync :rootOpened="true" :multi="true" @onCheck="treeCheck"></deptTreeSync>
    </a-col>
    <a-col :span="16">
      <a-table
        ref="table"
        size="small"
        rowKey="id"
        :columns="columns"
        :scroll="{ y: 540 }"
        :dataSource="dataSource"
        :pagination="false"
        :loading="loading"
        type="radio"
        :row-selection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type:'radio'}"
        class="name-table">
        <template slot="departName" slot-scope="text, record, index">
          <j-ellipsis :value="text" :length="10" />
        </template>
        <template slot="realname" slot-scope="text, record, index">
          <j-ellipsis :value="text" :length="8" />
        </template>
      </a-table>
    </a-col>
  </a-row>
</template>

<script>
import deptTreeSync from '../deptTreeSync'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getAction, httpAction } from '@/api/manage'

const columns1 = [
  {
    title: '部门',
    align: 'center',
    dataIndex: 'departName',
    scopedSlots: { customRender: 'departName' },
    key: 'departName'
  },
  {
    title: '姓名',
    align: 'center',
    width: 70,
    dataIndex: 'realname',
    scopedSlots: { customRender: 'realname' },
    key: 'realname'
  }
  // {
  //   title: '操作',
  //   dataIndex: 'action',
  //   align: 'center',
  //   width: 40,
  //   slots: {title: 'actionName'},
  //   scopedSlots: {customRender: 'action'}
  // }
]

const columns = [
  {
    title: '部门',
    align: 'center',
    dataIndex: 'departName',
    scopedSlots: { customRender: 'departName' },
    key: 'departName'
  },
  {
    title: '姓名',
    align: 'center',
    dataIndex: 'realname',
    scopedSlots: { customRender: 'realname' },
    key: 'realname'
  }
]
export default {
  name: 'DownForm',
  mixins: [JeecgListMixin],
  components: { deptTreeSync },
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      singleChoice: true,
      model: {},
      rightArr: [],
      downList: [],
      initList: [], // 加载进来的right数据
      middleArr: [],
      columns: columns,
      columns1: columns1,
      queryParam: {},
      confirmLoading: false,
      disableMixinCreated: true,
      url: {
        list: '/sjtb/dataCollectionTemplateFile/deparusertlist'
      }
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    }
  },
  created() {
  },
  watch: {
    selectionRows(val) {
      if (this.middleArr.length > 0) {
        if (this.selectedRowKeys.length < this.rightArr.length) {
          let smallArr = []
          for (let i = 0; i < this.selectedRowKeys.length; i++) {
            for (let j = 0; j < this.rightArr.length; j++) {
              if (this.rightArr[j].id === this.selectedRowKeys[i]) {
                smallArr.push(this.rightArr[j])
              }
            }
          }
          this.rightArr = []
          this.rightArr = [...smallArr]
          this.middleArr = [...this.rightArr]
        } else {
          this.rightArr = []
          let AndArr = [...this.middleArr, ...val]
          this.rightArr = this.uniqueArray(AndArr)
        }
      } else {
        this.rightArr = []
        this.rightArr = [...val]
      }
    }
  },
  methods: {
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectionRows = selectionRows
    },

    uniqueArray(arr) {
      let map = new Map()
      for (let item of arr) {
        if (!map.has(item.id)) {
          map.set(item.id, item)
        }
      }
      return [...map.values()]
    },
    treeCheck(data) {
      this.selectionRows = []
      this.selectedRowKeys = []
      this.middleArr = [...this.initList]
      if (data.length > 0) {
        this.queryParam.depId = data.toString()
        this.loadData(1)
      } else {
        this.dataSource = []
        this.queryParam.depId = ''
      }
    },
    getOnDown() {
      getAction('/sjtb/dataCollectionTemplateFile/getReporterlist', {
        templateId: this.model.id,
        versionId: this.model.versionId,
        reportPeriod: this.model.reportPeriod
      }).then((res) => {
        if (res.success) {
          // this.rightArr = res.result
          this.initList = res.result
          this.downList = res.result
          for (let item of res.result) {
            this.selectedRowKeys.push(item.id)
          }
        }
      })
    },
    edit(record, singleChoice = true) {
      this.model = record
      this.singleChoice = singleChoice
      if (singleChoice) {
        this.getOnDown()
      }
      this.visible = true
    },
    submitForm() {
      if (this.selectedRowKeys[0]) {
        httpAction('/sjxmzygl/sjListRectification/issued', {
          userId: this.selectedRowKeys[0],
          proId: this.model.id
        }, 'post').then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.$emit('ok')
          } else {
            this.$message.warning(res.message)
          }
        }).finally(() => {
          this.confirmLoading = false
        })
      } else {
        this.$message.warning('请选择下发对象')
      }
    }
  }
}
</script>
<style lang="less" scoped>
.name-table {
  /deep/ .ant-table-small {
    height: 542px;
  }

  /deep/ .ant-btn-link {
    padding: 0 5px !important;
  }

  /deep/ .ant-table-thead {
    display: none;
  }

  /deep/ .ant-btn-link {
    height: 20px !important;
  }
}
</style>